<template>
  <div class="posterShow">
    <div class="imgArea">
      <image class="canvasImg" :src="canvasImg" id="canvasImg" alt="" @click.stop=""></image>
    </div>
    <div class="totast_save">可长按保存图片或转发好友</div>
    <vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
  </div>
</template>

<script>
import {VueCanvasPoster} from 'vue-canvas-poster'
import {mapState} from "vuex";
import {shareFun} from '@/until/QFH5.js'
import {strChange} from '@/until/tool'
export default {
  name: "posterShow",
  data() {
    return {
      painting: {},
      canvasImg: '',
      imgUrl: '',
    }
  },
  computed:{
    ...mapState({
      qiniuUrl:state => state.qiniuUrl
    })
  },
  props:{
    posterData:{
      type:Object,
      default:{},
    },
    relayData:{
      type:Object,
      default: {}
    }
  },
  methods: {
    setView() {
      /*let posterTitle = strChange(this.relayData.settings.poster_play_num,this.posterData.posterNum)
      shareFun(posterTitle,this.relayData.settings.image,this.relayData.settings.desc,window.location.href,null,()=>{})*/
      let dataShare = Object.assign({},this.relayData)
	  let {follow_account} = dataShare.settings
	  let qrcodeUrl =follow_account==true? dataShare.qrcode: window.location.href
	  let qrcodeType = follow_account==true? 'image': 'qrcode'

                  let posterTitle = strChange(dataShare.settings.title,this.posterData.posterNum)
      console.info(posterTitle)
      console.info(this.posterData)
      dataShare.title = posterTitle
      this.$emit('setPosterShare',dataShare,false)
      this.painting = {
        width: '750px',
        height: '1448px',
        background: this.$store.state.mainColor,
        views: [
          /*背景图*/
          {
            type: 'image',
            url: this.posterData.bacImg,
            css: {
              top: '0',
              left: '0px',
              width: '750px',
              height: '1448px',
            }
          },
          /*/!*头图*!/
          {
            type: 'image',
            url: this.posterData.bacTitleImg,
            css: {
              top: '0',
              left: '50px',
              width: '650px',
              height: '400px'
            }
          },*/
          {
            type: 'rect',
            css: {
              top: '285px',
              left: '50px',
              width: '650px',
              height: '602px',
              color: this.$store.state.mainColor,
              borderRadius: '18px',
              borderWidth: '2px',
              borderColor: '#FCF8D2',
            }
          },
          /*地址图片*/
          {
            type: 'image',
            url:this.posterData.swiperImg,
            css: {
              top: '285px',
              left: '50px',
              width: '650px',
              height: '450px',
              borderRadius: '18px 18px 0 0',
              border: '1px solid #FCF8D2',
              mode:'scaleToFill',
            }
          },
          /*地址名称*/
          {
            type: 'text',
            text: '-  '+ this.posterData.swiperName +' -',
            css: {
              top: '795px',
              left: '60px',
              width: '630px',
              color: '#FCF8D2',
              fontSize: '33px',
              fontWeight:'bold',
              lineHeight: '42px',
              textAlign: 'center',
              maxLines: 1,

            }
          },
          {
            type: 'rect',
            css: {
              top: '915px',
              left: '51px',
              width: '648px',
              height: '290px',
              color: '#FCF8D2',
              borderRadius: '18px',
              border: '1px solid #FCF8D2'
            }
          },
          /*头像图*/
          {
            type: 'image',
            url:this.posterData.icon,
            css: {
              top: '935px',
              left: '71px',
              width: '125px',
              height: '125px',
              color: 'red',
              borderRadius: '60px',
            }
          },
          {
            type: 'rect',
            css: {
              top: '945px',
              left: '225px',
              width: '450px',
              height: '50px',
              color: '#F9D75D',
              borderRadius: '40px',
            }
          },
          {
            type: 'rect',
            css: {
              top: '1010px',
              left: '225px',
              width: '450px',
              height: '50px',
              color: '#F9D75D',
              borderRadius: '40px',
            }
          },
          /*个人信息区域*/
          {
            type: 'text',
            text: '姓名：'+ this.posterData.name,
            css: {
              top: '950px',
              left: '260px',
              width: '450px',
              height: '40px',
              color: "#222222",
              fontSize: '28px',
              lineHeight: '40px',
              textAlign: 'left',
              maxLines: 1,
              fontWeight: 'bold'
            }
          },
          {
            type: 'text',
            text: '生成时间：'+ this.posterData.timeStr,
            css: {
              top: '1015px',
              left: '260px',
              width: '450px',
              height: '40px',
              color: "#222222",
              fontSize: '28px',
              lineHeight: '40px',
              textAlign: 'left',
              maxLines: 1,
              fontWeight: 'bold'
            }
          },
          {
            type: 'text',
            text: this.posterData.wordTips,
            css: {
              top: '1090px',
              left: '90px',
              width: '91px',
              height: '40px',
              color: this.$store.state.mainColor,
              fontSize: '30px',
              lineHeight: '40px',
              textAlign: 'center',
              maxLines: 2,
              fontWeight: 'bold'
            }
          },
          {
            type: 'text',
            text: this.posterData.word,
            css: {
              top: '1095px',
              left: '245px',
              width: '400px',
              height: '40px',
              color: "#222222",
              fontSize: '30px',
              lineHeight: '40px',
              textAlign: 'left',
              maxLines: 2,
            }
          },
          /*二维码*/
          {
            type: 'rect',
            css: {
              top: '1223px',
              left: '52px',
              width: '160px',
              height: '158px',
              color: "#ffffff",
              borderRadius: '10px'
            }
          },
          {
            type: qrcodeType,
            content: qrcodeUrl,
			      url:qrcodeUrl,
            css: {
              top: '1230px', // 原来的1118px 因为有的屏幕太小改成1080px
              left: '60px',
              width: '145px',
              height: '145px',
            }
          },
          /*接力信息*/
          {
            type: 'rect',
            css: {
              top: '1225px',
              left: '232px',
              width: '470px',
              height: '158px',
              color: this.$store.state.mainColor,
              borderRadius: '10px'
            }
          },
          {
            type: 'text',
            text: this.posterData.posterNumText,
            css: {
              top: '1230px',
              left: '245px',
              width: '440px',
              height: '50px',
              color: "#FCF8D2",
              fontSize: '36px',
              fontWeight: 'bold',
              lineHeight: '50px',
              textAlign: 'center',
              maxLines: 1,
            }
          },
          /*{
            type: 'text',
            text: '主办单位：千帆网络科技有限公司',
            css: {
              top: '1370px',
              left: '245px',
              width: '440px',
              height: '30px',
              color: "#FFF387",
              fontSize: '22px',
              lineHeight: '30px',
              textAlign: 'center',
              maxLines: 1,
            }
          },*/
        ]
      }
      let _this = this
      for(let i = 0;i<_this.posterData.guide.length;i++){
        let data = {
          type: 'text',
          text: _this.posterData.guide[i],
          css: {
            top: Number(1300+i*30)+'px',
            left: '235px',
            width: '440px',
            height: '30px',
            color: "#FFF387",
            fontSize: '24px',
            lineHeight: '30px',
            textAlign: 'center',
            maxLines: 2,
          }
        }
        console.info(data)
        _this.painting.views.push(data)
      }
    },
    // 图片base64转图片url
    getImgUrl() {
      return new Promise((resolve, reject) => {
        var pic = this.canvasImg.split(";base64,")[1] // 截取data:image/png;base64,之后的base64
        var url = this.qiniuUrl + "/putb64/-1"; //非华东空间需要根据注意事项 1 修改上传域名
        var xhr = new XMLHttpRequest();
        var xhrget = new XMLHttpRequest();
        var obj;
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "image/png");
        xhr.setRequestHeader("Authorization", 'UpToken ' + this.upload_token);
        xhr.send(pic);
        xhr.onreadystatechange = () => {
          if (xhr.readyState == 4) {
            let info = JSON.parse(xhr.responseText)
            this.imgUrl = info.domain + info.key
            resolve()
          }
        }
      });
    },
    success(src) {
      this.canvasImg = src
      /*this.getImgUrl().then(res=>{

      })*/
    },
    fail(err) {
      console.log('fail', err)
    },
  },
  mounted() {
    this.setView()
	console.log(this.posterData,'-------------------')
  }
}
</script>

<style scoped lang="scss">
.posterShow {
  width: 100%;
  height: 100vh;
  position: relative;
  .imgArea {
    width: 100%;
    height: 100%;
    .canvasImg {
      width: 100%;
      height: 100%;
    }
  }
  .totast_save{
    position: absolute;
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    text-align: center;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    background: rgba(0,0,0,0.65);
    color: #ffffff;
  }
}
</style>
